const inputYear = (ele, from, to) => {
  // content and style set
  const yearPicker = ele.querySelector('input');
  const yearBox = ele.querySelector('div');
  to = Number.parseInt(to) ? Number.parseInt(to) : new Date().getFullYear();
  from = Number.parseInt(from) ? Number.parseInt(from) : 2000;
  yearPicker.value = new Date().getFullYear();
  const v = yearPicker.value;
  for (let i = to; i >= from; i--) {
    const t = document.createElement('p');
    if (i == v) t.classList.add('active');
    t.innerText = i;
    yearBox.appendChild(t);
  }
  yearBox.style.height =
    Number.parseFloat(
      getStyle(yearBox.querySelector('p'), 'height').replaceAll('px', '')
    ) *
      4 +
    50 +
    'px';
  bind(yearPicker, 'focus', () => {
    yearPicker.classList.add('active');
    yearBox.classList.add('active');
  });
  bind(yearPicker, 'click', () => {
    yearPicker.classList.add('active');
    yearBox.classList.add('active');
  });
  bind(ele, 'mouseenter', () => {
    yearPicker.classList.add('active');
    yearBox.classList.add('active');
  });
  bind(ele, 'mouseleave', () => {
    yearPicker.classList.remove('active');
    yearBox.classList.remove('active');
  });
  bind(yearBox, 'click', (e) => {
    const target = e.target;
    if (target.tagName !== 'P') return;
    yearPicker.value = target.innerText;
    [...yearBox.childNodes].forEach((d) => d.classList.remove('active'));
    target.classList.add('active');
    yearPicker.classList.remove('active');
    yearBox.classList.remove('active');
  });
};

const inputDualColSelect = (ele, obj) => {
  const picker = ele.querySelector('input');
  const box = ele.querySelector('.input-dual-col-box');
  const boxLeft = box.querySelector('.left');
  const boxRight = box.querySelector('.right');
  ele.valueL = 0;
  ele.valueR = 0;
  obj.forEach((d, i) => {
    const t = document.createElement('p');
    t.innerText = d.key;
    t.idx1 = 0;
    t.idx2 = i;
    boxLeft.appendChild(t);
  });
  bind(box, 'click', (e) => {
    const target = e.target;
    if (target.tagName !== 'P') return;
    if (target.idx1 === 0) {
      while (boxRight.lastChild) boxRight.lastChild.remove();
      obj[target.idx2].value.forEach((d, i) => {
        const t = document.createElement('p');
        t.innerText = d;
        t.idx1 = 1;
        t.idx2 = i;
        boxRight.appendChild(t);
      });
      ele.valueL = target.idx2;
      [...boxLeft.childNodes].forEach((d) => {
        d.classList.remove('active');
      });
      target.classList.add('active');
    } else {
      picker.value = target.innerText;
      ele.valueR = target.idx2;
      [...boxRight.childNodes].forEach((d) => {
        d.classList.remove('active');
      });
      target.classList.add('active');
      picker.classList.remove('active');
      box.classList.remove('active');
    }
  });
  bind(picker, 'focus', () => {
    picker.classList.add('active');
    box.classList.add('active');
  });
  bind(picker, 'click', () => {
    picker.classList.add('active');
    box.classList.add('active');
  });
  bind(ele, 'mouseenter', () => {
    picker.classList.add('active');
    box.classList.add('active');
  });
  bind(ele, 'mouseleave', () => {
    picker.classList.remove('active');
    box.classList.remove('active');
  });
  boxLeft.childNodes[0].click();
};

const showAlert = (ele, type, time, text) => {
  ele.innerText = text;
  ele.classList.remove('alert-error', 'alert-success');
  ele.classList.add('active', `alert-${type}`);
  setTimeout(() => {
    ele.classList.remove('active', `alert-${type}`);
  }, time);
};

getStyle = (elem, name) => {
  if ('getComputedStyle' in window) return getComputedStyle(elem, null)[name];
  return elem.currentStyle[name];
};

const bind = (obj, eventstr, callback) => {
  if (obj.addEventListener) obj.addEventListener(eventstr, callback, false);
  else
    obj.attachEvent('on' + eventstr, function () {
      callback.call(obj);
    });
};
